<#include "/common/layout.html">
<@body>
<body class="gray-bg">
	<div class="wrapper">
		<section class="content">
			<div class="row">
				<div class="col-md-3">
					<div class="box box-primary">
						<div class="box-header with-border">
							<h3 class="box-title">商品类目</h3>
							<div class="box-tools">
								<a type="button" class="btn btn-box-tool menuItem" href="javascript:;" onclick="toCategoryList()" title="类目管理"><i class="fa fa-edit"></i></a>
								<button type="button" class="btn btn-box-tool display-none" id="btnExpand" title="展开"><i class="fa fa-chevron-up"></i></button>
								<button type="button" class="btn btn-box-tool" id="btnCollapse" title="折叠"><i class="fa fa-chevron-down"></i></button>
								<button type="button" class="btn btn-box-tool" id="btnRefresh" title="刷新类目"><i class="fa fa-refresh"></i></button>
							</div>
						</div>
						<div class="box-body box-profile">
							<div id="tree" class="ztree"></div>
						</div>
					</div>
				</div>
				<div class="col-md-9">
					<div class="box box-primary">
						<div class="box-header with-border">
							<h3 class="box-title">商品列表</h3>
							<div class="box-tools pull-right">
								<div class="has-feedback form-inline">
									<div class="input-group input-group-sm">
										<input type="text" name="search_value" id="search_value" class="form-control" placeholder="名称查询">
										<div class="input-group-btn">
										<a href="javascript:;" id="search_data" class="btn btn-default" ><i class="fa fa-search"></i> 搜索</a>
										<a href="javascript:;" id="search_refresh" class="btn btn-default"><i class="fa fa-refresh"></i> 重置</a>
									</div>
									</div>
									<#if shiro.hasPermission("addGood")>
									<div class="input-group">
										<a class="btn btn-sm btn-primary" href="javascript:;" onclick="toAddProduct()"><i class="fa fa-plus"></i> 发布商品</a>
									</div>
									</#if>
								</div>
							</div>
						</div>
						<div class="box-body">
							<div class="table-responsive mailbox-messages">
								<table id="product_initTable" class="table table-bordered table-hover"></table>
							</div>
						</div>
					</div>
				</div>
			</div>
		</section>
	</div>
</body>
</@body>
<script>
	$(function() {
		queryDeptTree();
		initTable();
		//图片查看
	    $('.magnific-image-single').magnificPopup({
			type:'image',
		});
		$('.magnific-image-gallery').magnificPopup({
			delegate: 'a',
			type: 'image',
		    gallery: {
				enabled: true
		    },
		});
	});
	//右侧数据表格
	var query_data = {
		search: ''
	}
	//左侧树形菜单
	function queryDeptTree(){
		var url = "/mall/category/treeData";
		var options = {
			url: url,
			expandLevel: 1,
			onClick : zOnClick
		};
		$.tree.init(options);
		//点击个类目
		function zOnClick(event, treeId, treeNode) {
			query_data.categoryId = treeNode.id;
			query_data.parentId = treeNode.pId;
			reloadTable();
		}
	}
	
	//类别展开
	$('#btnExpand').click(function() {
		$._tree.expandAll(true);
	    $(this).hide();
	    $('#btnCollapse').show();
	});
	
	//类别收缩
	$('#btnCollapse').click(function() {
		$._tree.expandAll(false);
	    $(this).hide();
	    $('#btnExpand').show();
	});
	//刷新类别
	$('#btnRefresh').click(function() {
		queryDeptTree();
	});
	//搜索
	$("#search_data").off().on("click", function() {
		query_data.search = $("#search_value").val();
		reloadTable();
	});
	//重置
	$("#search_refresh").off().on("click", function() {
		query_data.categoryId = "";
		query_data.parentId = "";
		query_data.search = "";
		$("#search_value").val("");
		reloadTable();
	});
	//重新加载表格
	function reloadTable() {
		var oSetting = data_oTable.settings()[0];
		oSetting.ajax.data = query_data;
		data_oTable.draw();
	}
	//渲染表格
	function initTable() {
		var options = {
			id: "product_initTable",
			ajax: {
				url: "/mall/good/listPage",
				type: "POST",
				data: query_data,
			},
			lengthMenu: [5, 10, 20, 50],
			pageLength: 5,
			headerCallback: function(e, a, t, n, s) {
				e.getElementsByTagName("th")[0].innerHTML = '<label class="m-checkbox"><input type="checkbox" class="minimal m-group-checkable" value="root"></label>';
				$(e.getElementsByTagName("th")).parent().css("background-color", "#f7f7fa");
			},
			columnDefs: [{
				targets: 0,
				width: "30px",
				orderable: !1,
				render: function(e, a, t, n) {
					return '<label class="m-checkbox"><input type ="checkbox" class="minimal m-checkable" value="' + t.id + '"></label>';
				}
			},{
				targets: 1,
				title: "图片",
				width: "100px",
				orderable: !1,
				render: function(e, a, t, n) {
					return $.table.imageSquareView(t.picUrl);
				}
			},{
				targets: 2,
				title: "名称",
				orderable: !1,
				render: function(e, a, t, n) {
					if (t.goodName != null) {
						return t.goodName;
					} else {
						return "";
					}
				}
			},{
				targets: 3,
				title: "最低售价",
				width: "70px",
				orderable: !1,
				render: function(e, a, t, n) {
					if (t.goodPrice != null) {
						return t.goodPrice;
					} else {
						return "";
					}
				}
			},{
				targets: 4,
				title: "规格",
				width: "75px",
				orderable: !1,
				render: function(e, a, t, n) {
					if (t.specType == 1) {
						return '<font style="color:#ff851b;">单一规格</font>';
					} else {
						return '<font style="color:#ff851b;">多种规格</font>';
					}
				}
			},{
				targets: 5,
				title: "状态",
				width: "120px",
				orderable: !1,
				render: function(e, a, t, n) {
					var htmls = '';
					if (t.isHot == 0) {
						htmls +='<div><span>是否热销：<font style="color:#f56954;">否</font></span></div>';
					} else {
						htmls +='<div><span>是否热销：<font style="color:#ff851b;">是</font></span></div>';
					}
					if (t.isNew == 0) {
						htmls +='<div><span>是否新品：<font style="color:#f56954;">否</font></span></div>';
					} else {
						htmls +='<div><span>是否新品：<font style="color:#ff851b;">是</font></span></div>';
					}
					if (t.isShelf == 0) {
						htmls +='<div><span>是否上架：<font style="color:#f56954;">否</font></span></div>';
					} else {
						htmls +='<div><span>是否上架：<font style="color:#ff851b;">是</font></span></div>';
					}
					return htmls
					
				}
			},{
				targets: 6,
				title: "发布时间",
				width: "150px",
				orderable: !1,
				render: function(e, a, t, n) {
					if (t.createTime != null) {
						return t.createTime;
					} else {
						return "";
					}
				}
			},{
				targets: 7,
				title: "操作",
				orderable: !1,
				render: function(e, a, t, n) {
					var html = '';
						html += '<div>'
						<#if shiro.hasPermission("editGood")>
							html += '<a class="btn btn-primary btn-xs" href="javascript:;" onclick="toEditProduct('+ t.goodsId +')"><i class="fa fa-pencil"></i>编辑</a>'
						</#if>	
						<#if shiro.hasPermission("deleteGood")>
							html += ' <a class="btn btn-danger btn-xs" delete-url="/mall/good/delete" data-id="'+ t.goodsId +'"><i class="fa fa-trash"></i>删除</a>'
						</#if>
						html += '</div>';
					return html;
				}
			}]
		};
		//渲染表格
		data_oTable = $.table.init(options);
	}
	
	function toAddProduct() {
		createMenuItem("/mall/good/add", "添加商品");
	}
	
	function toEditProduct(goodsId) {
		createMenuItem("/mall/good/edit/" + goodsId, "编辑商品");
	}
	
	function toCategoryList() {
		createMenuItem("/mall/category/list", "类目管理");
	}
</script>
